<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inula Request Cancel Request Test</title>
    <link rel="stylesheet" type="text/css" href="cancelStyles.css">
</head>
<body>
<header>Inula Request Cancel Request Test</header>
<div class="container">
    <div class="button-group">
        <button id="sendRequestButton">Send Request</button>
        <button id="cancelRequestButton">Cancel Request</button>
    </div>
    <div class="message" id="message">等待发送请求...</div>
</div>
<script src="../../dist/bundle.js"></script>
<script>
  const sendRequestButton = document.getElementById('sendRequestButton');
  const cancelRequestButton = document.getElementById('cancelRequestButton');
  const message = document.getElementById('message');

  let controller = new AbortController();
  const signal = controller.signal;

  sendRequestButton.addEventListener('click', function() {
    setInterval(() => {
      inulaRequest.get('http://localhost:3001/data', {
        signal
      }).then(function(response) {
        message.innerHTML = '请求成功: ' + JSON.stringify(response.data, null, 2);
      }).catch(function(error) {
        if (inulaRequest.isCancel(error)) {
          message.innerHTML = '请求已被取消：' + error.message;
        } else {
          message.innerHTML = '请求出错：' + error.message;
        }
      });
    }, 1000)
  });

  cancelRequestButton.addEventListener('click', function () {
    controller.abort();
  });
</script>
</body>
</html>
